<template>
  <div :id="cref+'img'" class="pug-upload-box" v-if="modaltype==2">
    <img :src="img" alt="">
    <div class="pug-upload-icon" :id="uploadname"><i class="iconfont icon-upload"></i></div>
  </div>
  <div :id="cref+'img'" v-if="modaltype==1" class="wu-example">
    <div class="btns">
      <div :id="uploadname" class="picker">选择文件</div>
    </div>
    <div v-if="showinfo">
      <!--用来存放文件信息-->
      <div class="cinfo">{{ info }}</div>
      <div id="fileLilst" class="uploader-list">
        <div :id="file.id" class="file-item thumbnail" v-for="(file,index) in fileList" :key="index">
          <img :src="file.img" v-if="file.img">
          <h4 class="info">{{ file.name }}</h4>
          <p class="state">{{ file.info }}</p>
          <div class="progress-bar" v-show="hidepercent">
            <div class="progress progress-striped active">
              <div class="progress-bar" role="progressbar" :style="{'width': file.percent}"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import WebUploader from 'webuploader'

export default {
  name: 'PugUpload',
  props: {
    modelValue:String,
    cref:{
      type: String,
      default: ''
    },
    uploadname:{
      type: String,
      default: 'picker'
    },
    modal: {
      type: Number,
      default: 1
    },
    showinfo: {
      type: Boolean,
      default: false
    },
    img:{
      type: String,
      default:"https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png"
    }
  },
  data() {
    return {
      info: "",
      modaltype:1,
      result: null,
      fileinfo:{img:"https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png"},
      fileList: []
    }
  },
  created() {

    this.modaltype = this.$props.modal;
  },
  mounted() {
    this.uploadinit();
  },
  methods: {
    uploadinit(){
      var that = this;
      const uploader = WebUploader.create({
        // swf文件路径
        swf: '../assets/lib/webuploader/Uploader.swf',
        // 文件接收服务端。
        server: '/admin/v1/upload/oss/file',
        // 选择文件的按钮。可选。
        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
        pick: {
          id:'#'+that.$props.uploadname,
          multiple:false
        },
        // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
        resize: false,
        //是否开启自动上传
        auto: true
      });

      uploader.on('beforeFileQueued', function (file) {
        console.log('文件加入队前', file)
      });


      // 当有文件被添加进队列的时候
      uploader.on('fileQueued', function (file) {
        that.info = '文件加入队列后';
        file.hidepercent = false;
        file.percent = "0%";
        file.info = "开始上传";
        that.fileList.push(file);
      });


      // 文件上传过程中创建进度条实时显示。
      uploader.on('uploadProgress', function (file, percentage) {
        that.info = '文件上传中' + file + ',进度是：' + percentage;
        var fileObj = that.fileList.find(f => f.id == file.id);
        fileObj.percent = percentage * 100 + '%';
        fileObj.info = "上传中";
      });


      uploader.on('uploadSuccess', function (file, response) {
        that.info = '文件上传成功 ,' + file + ',结果是：' + response;
        that.result = response;
        var fileObj = that.fileList.find(f => f.id == file.id);
        fileObj.img = response.data.url;
        fileObj.info = "已上传";
        that.fileinfo.img = response.data.url;
        that.$emit("callback",response.data);
        that.$emit("update:modelValue",response.data.url);
      });

      uploader.on('uploadError', function (file, reason) {
        that.info = '文件上传失败' + file + ',失败原因是：' + reason;
        var fileObj = that.fileList.find(f => f.id == file.id);
        fileObj.info = "上传出错";
      });

      uploader.on('uploadComplete', function (file) {
        that.info = '文件上传完成'
        var fileObj = that.fileList.find(f => f.id == file.id);
        fileObj.hidepercent = true;
      });
    }
  }
}
</script>

<style scoped>
.wu-example{width: 86px;}
.pug-upload-box{width: 420px;position: relative;border:2px solid #f8f8f8;height: 240px;display: flex;align-items: center;justify-content: center;}
.pug-upload-box .pug-upload-icon{position: absolute;top:0;left:0;right:0;bottom: 0;display: flex;align-items: center;justify-content: center;background:rgba(255,255,255,0.68);border:2px dotted #ccc;visibility: hidden;cursor: pointer}
.pug-upload-box .pug-upload-icon i{color:#666;font-size:20px}
.pug-upload-box:hover .pug-upload-icon{visibility: visible}
</style>
